@import "mixin.less";
@import "blog_post.less";

.border1px(@color:@pale) { border: 1px solid @color; }

.padding(@value:0.7em 1.2em) { padding: @value; }

.plain() {
	background-image: none;
	border: none;
	outline: none;
	font-size: 1em;
	line-height: 1em;
}

/*common*/
.nav, .menu {
	.user-select(none);
	overflow: hidden;
	color: inherit;
	&-black {
		background: @black;
		color: @white;
	}
	&-icon .item {
		padding: 0 0 !important;
		width: 40px !important;;
		text-align: center !important;;
	}
	ul { list-style: none; margin: 0 0; }
	li { float: left; }
	.item {
		position: relative;
		.padding(0 1.8em);
		height: 40px;
		line-height: 40px;
		display: block;
		color: inherit;
		text-align: center;
		cursor: pointer;
		z-index: 0;
		.transition(color 0.3s);
		&-warning:after{
			background-color: @warning !important;
		}
		&:after {
			.transition(height 0.3s, width 0.3s;);
			z-index: -1;
			position: absolute;
			display: block;
			width: 100%;
			height: 0;
			left: 0;
			bottom: 0;
			content: "";
			background-color: @primary;
		}
		&:hover {
			color: white;
			&:after { height: 100%; }
		}
	}
	&-vertical {
		li { float: none; }
		.item {
			&:after { width: 0; height: 100%; }
			&:hover:after { width: 100%; height: 100%; }
		}
	}
}

button, .btn {
	display: inline-block;
	.plain();
	.padding();
	color: white;
	cursor: pointer;
	.border-radius();
	&:disabled { background-color: @pale; }
	&-primary {
		background-color: @primary;
		&:active { background-color: darken(@primary, 5%); }
	}
	&-warning {
		background-color: @warning;
		&:active { background-color: darken(@warning, 5%); }
	}
}

input[type='text'], input[type='password'], textarea, select {
	width: 100%;
	.plain();
	.padding();
	color: @black;
	background: white;
	.border1px();
	.border-radius(0.2em);
	.box-sizing(border-box);
	&:focus { .border1px(@primary); }
}

label{
	display: inline-block;
	width:100%;
	.padding();
	color: @black;
	font-weight: bold;
}

.loading {
	position: relative;
	overflow: hidden;
	&:before {
		position: absolute;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		opacity: 0.8;
		z-index: 100;
	}
	&:after {
		position: absolute;
		display: block;
		content: "";
		margin: -1.5em 0 0 -1.5em;
		top: 50%;
		left: 50%;
		width: 3em;
		height: 3em;
		z-index: 101;
		border-color: @pale lighten(@pale, 20%) lighten(@pale, 20%) lighten(@pale, 20%);
		border-width: 0.3em;
		border-style: solid;
		.border-radius(3em);
		.animate(spin 0.5s infinite linear);
	}
}

.typed-cursor {
	.animate(blink 1s infinite);
}

.article {
	position: relative;
	&:before {
		position: absolute;
		content: '';
		display: block;
		top: 0;
		left: 0;
		height: 4px;
		width: 100%;
		background-color: @primary;
	}
	.title { margin-bottom: 20px; font-size: 2em; text-align: center; color: @primary; }
	.overview {
		overflow: hidden;
		margin-bottom: 20px;
		.img {
			width: 40%;
			height: auto;
			float: left;
		}
		.summary {
			float: left;
			width: 60%;
		}
		.summary-w {
			width: 100%;
		}
	}
	.info {
		color: @pale;
		.date { }
		.meta {
			float: right;
			.fa { margin-right: 6px; }
		}
	}
	.content {
	}
}

.pagination {
	ul { list-style: none; }
	/*li{ float: left;}*/
	background-color: white;
	text-align: center;
	.item {
		&:extend(.nav .item);
		.padding(0 0);
		height: 40px;
		width: 40px;
		line-height: 40px;
		display: inline-block;
		&.active {
			color: white;
			&:after { height: 100%; width: 100%; }
		}
		&:after {&:extend(.nav .item:after); }
		&:hover {
			&:extend(.nav .item:hover);
			&:after {&:extend(.nav .item:hover:after); }
		}
	}
}

.tag {
	font-size: 0.8em;
	padding: 0.1em 0.3em;
	margin-right: 5px;
	.border-radius(2em);
	border: 1px solid @black;
	color: @black;
	&:hover {
		border: 1px solid @primary;
		color: @primary;
	}
}

.tags {
	ul { list-style: none; }
	li { float: left; }
	.item {
		&:extend(.tag);
		&:hover {&:extend(.tag:hover); }
	}
}

.table {
	.box-sizing(border-box);
	.border-radius();
	border: 1px solid @pale;
	.row {
		&.header{
			background-color: #eaeaea !important;
		}
		&:first-child { border-top: none;}
		&:nth-child(odd) { background-color: #fbfbfb; }
		border-top: 1px solid @pale;
	}
}